<template>
	<div class="page">
		<div class="p-10 system-page-background b-r-4">
			<!-- <my-form inline query :model="queryParams" :formItem="queryFormItem" @searchFn="refTable.reload()" @resetFn="refTable.reload()" />
			 -->
			<!-- <el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="租户数据源" name="1"></el-tab-pane>
				<el-tab-pane label="公共数据源" name="2"></el-tab-pane>
			</el-tabs> -->
		</div>

		<div class="f1 h0 flex-col p-l-10 p-r-10 system-page-background">
			<div key="1" v-show="activeName === '1'" class="flex-col f1 h0">
				<div class="p-b-10" v-hasPermi="['']">
					<el-button type="primary" @click="insertFn()" icon="Plus" v-hasPermi="['']">新 增</el-button>
					<el-button
						type="danger"
						:disabled="!tableSelection.length"
						@click="deleteFn(tableSelection)"
						icon="Delete"
						v-hasPermi="['']"
					>
						删 除
					</el-button>
				</div>
				<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
					<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
						<template #type="{ row }">{{ selectDictLabel($store.dict.sourceType, row.type) }}</template>
						<template #default="{ row }">
							<my-button-text @click="detailFn(row)">查看</my-button-text>
							<my-button-text @click="updateFn(row)" v-hasPermi="['']">修改</my-button-text>
							<my-button-text @click="deleteFn(row)" v-hasPermi="['']">删除</my-button-text>
						</template>
					</my-table>
				</my-list-panel>
			</div>
			<div key="2" v-show="activeName === '2'">公共数据源</div>
		</div>

		<!-- 添加、修改对话框 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="570px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="90px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{
						label: '标题',
						prop: 'title',
						required: true
					},
					{
						label: '编码',
						prop: 'code'
					},

					{
						label: '数据源类型',
						prop: 'type',
						itemType: 'select',
						type: 'GETsourceType'
					},

					{
						label: '用户',
						prop: 'username',
						col: { span: 12 }
					},
					{
						label: '密码',
						prop: 'password',
						col: { span: 12 }
					},
					{
						label: '连接的url',
						prop: 'url',
						type: 'textarea',
						autosize: { minRows: 4 }
					}
				]"
			/>
			<template #footer>
				<el-button @click="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="management">
import { addSource, removeSource, editSource, pageSource } from '@/api/data';

let activeName = ref('1');

/********************************************************** 表格增删改查 ***********************************************************/
const {
	refTable,
	state,
	tableSelection,
	refDialogForm,
	dialog,
	dialogTitle,
	loadData,
	insertFn,
	deleteFn,
	updateFn,
	detailFn,
	dialogSubmitFn
} = pageMixin({
	columns: [
		{
			type: 'selection'
		},
		{
			label: '标题',
			prop: 'title'
		},
		{
			label: '编码',
			prop: 'code'
		},
		{
			label: '数据源类型',
			prop: 'type'
		},
		{
			label: '用户',
			prop: 'username'
		},
		{
			label: '密码',
			prop: 'password'
		},
		{
			label: '连接的url',
			prop: 'url',
			showOverflowTooltip: true,
			width: '200'
		},
		{
			label: '操作',
			width: 180
		}
	],
	api: { add: addSource, remove: removeSource, edit: editSource, page: pageSource },
	dialogDefault: {
		title: '租户数据源'
	}
});
// 初始化执行逻辑
$store.dict.GETsourceType();
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}
</style>
